<template>
    <div class="flip-clock">
      <FlipUnit v-for="(digit, index) in digits" :key="index" :digit="digit" />
    </div>
</template>
  
<script setup>
  import { ref, onMounted } from 'vue'
  import FlipUnit from './FlipUnit.vue'
  
//   const digits = ref(Array(6).fill(0))
  const digits = ref(Array(3).fill(0))
  const updateClock = () => {
    const now = new Date()
    const h = now.getHours().toString().padStart(2, '0')
    const m = now.getMinutes().toString().padStart(2, '0')
    const s = now.getSeconds().toString().padStart(2, '0')
    digits.value = [h, m, s].map(Number)
    // digits.value = [0].map(Number)
    
  }
  
  onMounted(() => {
    updateClock()
    setInterval(updateClock, 1000)
  })
</script>
  
<style scoped>
  .flip-clock {
    display: flex;
    gap: 10px;
    font-family: 'Courier New', monospace;
  }
</style>
  ./Card/FlipUnit.vue